<template>
	<scroll-view scroll-x class="topic-scroll">
		<view class="topic-list">
			<view @click="openTopic(item)" class="topic" v-for="(item, index) in dataList" :key="index">
				<u-image border-radius="10" width="100%" height="100%" :src="item.image"></u-image>
				<view class="topic-mask">#{{item.title}}#</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			dataList: {
				// 动态数据
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			},
		},
		data() {
			return {
				customStyle: {
					padding: '5px 0'
				}
			}
		},
		created() {
			this.init();
	    },
		methods: {
			init() {
				
			},
			openTopic(topic) {
				this.$emit('openTopic', topic);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.topic-scroll {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
	}
	.topic-list {
		white-space: nowrap;
	}
	.topic-list .topic:first-child{
		margin-left: 15px;
	}
	.topic-list .topic:last-child{
		margin-right: 15px;
	}
	.topic {
		width: 110px;
		height: 60px;
		background-color: #ddd;
		margin-left: 10px;
		display: inline-block;
		border-radius: 5px;
		position: relative;
	}
	.topic-mask{
		background-color: #00000033;
		width: 100%;
		height: 100%;
		border-radius: 5px;
		position: absolute;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 24rpx;
	}
</style>
